import React, { useEffect, useState } from 'react'
import { getDouyin } from '../api/douyin';
import { DouyinItems } from '../api/douyin/types';

export default function DouyinCom() {
  //定义状态
  let [douyin, setDouyin] = useState<DouyinItems>([]);//
  //useEffect 回调
  useEffect(() => {
    let getData = async () => {
      //调用函数 发送请求
      let result = await getDouyin();
      //更新状态
      setDouyin(result);
    }
    getData();
  }, [])

  return (
    <table>
      <tr><td>ID</td><td>标题</td><td>封面</td></tr>
      {
        douyin.map(item => {
          return <tr><td>{item.id}</td><td>{item.desc}</td><td><img height="100" src={'http://cdn.xiaohigh.com' + item.cover_local} alt="" /></td></tr>
        })
      }
    </table>
  )
}
